<script setup>
import { ref } from 'vue'

const props = defineProps({
    comment: {
        type: Object,
        required: true
    },
    level: {
        type: Number,
        default: 0
    },
    maxDepth: {
        type: Number,
        default: 5
    },
    parentAuthor: { // 新增：父级评论作者
        type: String,
        default: ''
    }
})
const replyTextarea = ref(null)

const emit = defineEmits(['reply'])

const showReplyInput = ref(false)
const replyContent = ref('')

const toggleReplyInput = async () => {
    showReplyInput.value = !showReplyInput.value
    if (!showReplyInput.value) {
        replyContent.value = ''
    } else {
        await nextTick() // 等待DOM更新
        replyTextarea.value.focus()
    }
}

const submitReply = () => {
    if (!replyContent.value.trim()) {
        alert('请输入回复内容')
        return
    }

    emit('reply', {
        targetCommentId: props.comment.id,
        targetCommentAuthor: props.comment.label, // 传递被回复者
        content: replyContent.value.trim(),
        parentId: props.comment.id
    })

    replyContent.value = ''
    showReplyInput.value = false
}

const cancelReply = () => {
    replyContent.value = ''
    showReplyInput.value = false
}

// 检查是否达到最大深度
const canRenderChildren = props.level < props.maxDepth
</script>
<template>
    <div class="comment-item" :style="{ marginLeft: `${level != 0 ? 20 : 0}px` }">
        <div class="comment-main">
            <div class="comment-avatar"></div>
            <div class="comment-content">
                <div class="comment-header">
                    <span class="comment-author">{{ comment.label }}</span>
                    <!-- 显示回复了谁 -->
                    <span v-if="parentAuthor && level > 1" class="reply-to">
                        回复 @{{ parentAuthor }}
                    </span>
                    <span class="comment-time">{{ comment.time }}</span>
                    <button class="reply-btn" @click="toggleReplyInput">
                        {{ showReplyInput ? '取消回复' : '回复' }}
                    </button>
                </div>
                <p class="comment-text">{{ comment.content || '这是一条评论内容' }}</p>

                <div v-if="showReplyInput" class="reply-input">
                    <!-- 在输入框中显示回复对象 -->
                    <div v-if="comment.label" class="reply-hint">
                        回复 @{{ comment.label }}
                    </div>
                    <textarea ref="replyTextarea" v-model="replyContent" placeholder="写下你的回复..." rows="3"
                        class="reply-textarea"></textarea>
                    <div class="reply-actions">
                        <button class="cancel-btn" @click="cancelReply">取消</button>
                        <button class="submit-btn" @click="submitReply">回复</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 只在未达到最大深度时递归渲染 -->

    </div>
    <CommentItem v-for="child in comment.children" :key="child.id" :comment="child" :level="level + 1"
        :maxDepth="maxDepth" :parentAuthor="comment.label" @reply="emit('reply', $event)" />

    <!-- 达到最大深度时的提示 -->
    <!-- <div v-else-if="comment.children && comment.children.length" class="max-depth-notice">
        <button class="load-more-replies" @click="$emit('loadMoreReplies', comment.id)">
            展开更多回复 ({{ comment.children.length }}条)
        </button>
    </div> -->
</template>

<style lang="scss" scoped>
.comment-item {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-item .comment-main {
    display: flex;
    transition: background-color 0.2s;
    width: 100%;
    padding: 4px;

    &:hover {
        background-color: var(--header-hover-color);
    }
}

.comment-avatar {
    width: 40px;
    height: 40px;
    background: #e0e0e0;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.comment-author {
    font-weight: bold;
    font-size: 14px;
}

.reply-to {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

.comment-time {
    font-size: 12px;
}

.reply-btn {
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
        background: #f5f5f5;
        border-color: #ccc;
    }
}

.comment-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* 回复输入框样式 */
.reply-input {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.reply-hint {
    font-size: 12px;
    margin-bottom: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.reply-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;

    &:focus {
        outline: none;
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
    }

    &::placeholder {
        color: #999;
    }
}

.reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.cancel-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
        background: #f5f5f5;
        border-color: #ccc;
    }
}

.submit-btn {
    padding: 6px 12px;
    border: 1px solid #1890ff;
    background: #1890ff;
    border-radius: 4px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
        background: #40a9ff;
        border-color: #40a9ff;
    }

    &:disabled {
        background: #ccc;
        border-color: #ccc;
        cursor: not-allowed;
    }
}

.max-depth-notice {
    margin-top: 8px;
    margin-left: 52px;
}

.load-more-replies {
    padding: 4px 12px;
    border: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 16px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
        background: #e9ecef;
        border-color: #ccc;
    }
}
</style>